<template>
  <div class="searchPage">
<view class="search_input_box">

  <uv-input
  @confirm="confirmSearch"
  v-model="inputSearch"
  customStyle="border:none;background-color:#F5F6F8"
  shape="circle"
		    placeholder="输入关键字搜索商品"
		    prefixIcon="search"
		    prefixIconStyle="font-size: 30rpx;color: #909399"
		></uv-input>
</view>

<view class="usually_search">
<view class="title">
<view class="title_text">最近搜索</view>

<uv-icon v-if="arr.length>0" @click="Del_tips" size="18" name="trash"></uv-icon>
</view>


<view class="searchItem">
<view v-if="arr.length > 0" @click="choose(item)" v-for="(item,index) in arr" :key="index" class="item">
  {{ item }}       
</view>

<view  v-else class="item">
  暂无数据     
</view>
</view>
</view>


<view class="usually_search">
<view class="title">
<view class="title_text">搜索发现</view>


</view>


<view class="searchItem">

<view v-if="findSearch.length > 0" @click="choose(item)" v-for="(item,index) in findSearch" :key="index" class="item">
  {{ item }}       
</view>

<view  v-else class="item">
  暂无数据     
</view>
</view>
</view>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {getSearch} from '../https/api/search'
import { onShow } from "@dcloudio/uni-app";

let inputSearch = ref(null)

let choose = (text) => {
  inputSearch.value = text
  confirmSearch()
}

let Del_tips = () => {
  uni.showModal({
    title: '提示',
    content: '确认要删除最近搜索吗？',
    success: function (res) {
        if (res.confirm) {
    uni.setStorageSync('inputSearchArr',JSON.stringify([]))
    arr.value = []
        } 
    }
});

}


let findSearch = ref([])
let getSearchData = async(data) => {
  let res = await getSearch(data)
  if(res){
   
    findSearch.value = res.data.map(v=>v.title)
  }
}

onShow(()=>{
  if(uni.getStorageSync('inputSearchArr')){
    let arrs = JSON.parse(uni.getStorageSync('inputSearchArr'))
    arr.value = [...new Set(arrs)]
  }
getSearchData({
  number: 10,
      shopId: 1,
      sort: 1
})
})
// 确认发送
let arr = ref([])
let confirmSearch = async () => {
  if(inputSearch.value){
    arr.value.push(inputSearch.value)
    uni.setStorageSync('inputSearchArr',JSON.stringify(arr.value))
    uni.setStorageSync('inputSearch',inputSearch.value)
  uni.navigateTo({
    url: '/pages/list'
  }
)
  }else{
    uni.showToast({
      title: '请输入搜索内容',
      icon: 'none'
    })
  }


}

</script>

<style scoped lang="scss">
.usually_search{
  .searchItem{
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    
    flex-wrap: wrap;
    .item{
      border-radius: 50rpx;
      background: #EFEFEF;
      padding: 8rpx 13rpx;
      margin-bottom: 20rpx;
      margin-right: 20rpx;
      font-size: 22rpx;
    }
  }
  margin-top: 30rpx;
  .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title_text{
      font-size: 26rpx;
    }
  }
}
.searchPage{
  padding: 25rpx;
height: 100vh;
}

</style>